<template>
<!--    :prefix-icon="'前图标'" :suffix-icon="'后图标'"-->
    <el-input
            v-bind="$attrs"
            v-model="Val"
            @blur="props.blur ? props.blur($event) : false"
            @focus="props.focus ? props.focus($event) : false"
            @change="props.change ? props.change($event) : false"
            @input="props.input ? props.input($event) : false"
            @clear="props.clear ? props.clear() : false"
    >

    </el-input>
</template>
<script lang="ts">
    import {defineComponent, ref, watch, useSlots} from 'vue'

    export default defineComponent({
        props: {
            modelValue: {
                type: String,
                default: () => ''
            },
            blur: {
                type: Function,
                default: () => () => { }
            },
            focus: {
                type: Function,
                default: () => () => { }
            },
            change: {
                type: Function,
                default: () => () => { }
            },
            input: {
                type: Function,
                default: () => () => { }
            },
            clear: {
                type: Function,
                default: () => () => { }
            }
        },
        emits: {
            'update:modelValue': (val?: string) => true,
        },

        setup(props, content) {

            // const attrs = this.$attrs;
            const Val = ref(props.modelValue);
            //监听父组件的值
            watch(() => props.modelValue, () => {
                Val.value = props.modelValue
            })
            content.emit('update:modelValue', Val)

            return {

                Val
            }
        }
    })
</script>